<template>
  <div class="home-index">
    <!-- <div style="width: calc(100vw); height: calc(100vh); background: url(../../../static/pc_bg.png) no-repeat; background-size: 100% 100%; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative;" class="invisible-scrollbar"> -->
    <div
      style="width: calc(100vw); height: calc(100vh); background: #3C3C3C; background-size: 100% 100%; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative;"
      class="invisible-scrollbar">
      <!-- 标题开始 -->
      <div ref="matchTitleElement"
        style="
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
        "
        :style="{ paddingTop: 30 / 96 + 'rem', paddingBottom: 29 / 96 + 'rem' }" 
      >
        <div
          :style="{width: '7%', height: '100%', position: 'absolute', top: '0rem', left: '0rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}"
          @mouseleave="leaveClick" @mouseenter="enterClick">
          <div v-if="backsShows"
            :style="{width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', cursor: 'pointer'}"
            @click="goBackClick">
            <img :style="{width: (50 / 96) + 'rem', height: (50 / 96) + 'rem'}" src="../../../static/match-backs.png" />
          </div>
        </div>
        <div class="match-title-main" :style="{ height: '100%' }">
          <span class="match-title" :style="{ fontSize: (60 / 96) + 'rem', /*lineHeight: (30 / 96) + 'rem'*/ }">{{
            matchTitle }}</span>
        </div>
        <div
          :style="{width: '17%', height: '100%', position: 'absolute', top: '0rem', right: '0rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}"
          @mouseleave="leaveSettingClick" @mouseenter="enterSettingClick">
          <div v-if="settingShows"
            :style="{width: '100%', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <div
              style="width: 60%; height: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; cursor: pointer;"
              @click="settingClick">
              <span style="font-size: 0.5rem; color: #FFFFFF;">设置</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 标题结束 -->
      <!-- 篮球长蜂鸣开始 -->
      <div v-show="false">
        <audio ref="audioLongRef" id="audio">
          <source src="../../../static/long.mp3" type="audio/mpeg" />
        </audio>
      </div>
      <!-- 篮球长蜂鸣结束 -->
      <!-- 篮球短蜂鸣开始 -->
      <div v-show="false">
        <audio ref="audioShortRef" id="audio">
          <source src="../../../static/short.mp3" type="audio/mpeg" />
        </audio>
      </div>
      <!-- 篮球短蜂鸣结束 -->
      <!-- 队伍开始 -->
      <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
        ref="teamElement">
        <div :style="{ width: '50%', marginBottom: (30 / 96) + 'rem' }"
          style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
          <div
            :style="{ width: '80%', height: (108 / 96) + 'rem', borderTop: (2 / 96) + 'rem solid', borderBottom: (2 / 96) + 'rem solid' }"
            style="border-image: -webkit-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: -moz-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <span
              :style="{ fontSize: (50 / 96) + 'rem', lineHeight: (50 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }"
              style="font-family: SimSun; font-weight: 400; color: #FFFFFF;">{{ homeTeamName }}</span>
          </div>
          <!-- <div :style="{ width: (157 / 96) + 'rem', height: (157 / 96) + 'rem' }">
            <img :style="{ width: '100%', height: '100%', borderRadius: '100%' }" :src="homeTeamImg" />
          </div>
          <div :style="{ width: (200 / 96) + 'rem' }"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;"
            @click="toMatchInfosClick">
            <span :style="{ fontSize: (90 / 96) + 'rem' }"
              style="font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF;">{{ homeTeamScorce }}</span>
          </div> -->
        </div>
        <!-- <div :style="{ width: '10%' }"
          style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative;">
          <div v-if="homeTeamScorce > awayTeamScorce"
            :style="{ width: (100 / 96) + 'rem', height: (43 / 96) + 'rem', marginTop: -(16 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: -0.1rem;">
            <img style="width: 100%; height: 100%;" src="../../../static/pc_jt-left.png" />
          </div>
          <div v-if="homeTeamScorce < awayTeamScorce"
            :style="{ width: (100 / 96) + 'rem', height: (43 / 96) + 'rem', marginTop: -(16 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: -0.1rem;">
            <img style="width: 100%; height: 100%;" src="../../../static/pc_jt-right.png" />
          </div>
          <div v-if="homeTeamScorce == awayTeamScorce"
            :style="{ width: (100 / 96) + 'rem', height: (43 / 96) + 'rem', marginTop: -(16 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: -0.1rem;">
          </div>
          <span :style="{ fontSize: (50 / 96) + 'rem' }"
            style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">vs</span>
        </div> -->
        <div :style="{ width: '50%', marginBottom: (30 / 96) + 'rem' }"
          style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
          <!-- <div :style="{ width: (200 / 96) + 'rem' }"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;"
            @click="toMatchInfosClick">
            <span :style="{ fontSize: (90 / 96) + 'rem' }"
              style="font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF;">{{ awayTeamScorce }}</span>
              </div>
          <div :style="{ width: (157 / 96) + 'rem', height: (157 / 96) + 'rem' }">
            <img :style="{ width: '100%', height: '100%', borderRadius: '100%' }" :src="awayTeamImg" />
          </div> -->
          <div
            :style="{ width: '80%', height: (108 / 96) + 'rem', borderTop: (2 / 96) + 'rem solid', borderBottom: (2 / 96) + 'rem solid' }"
            style="border-image: -webkit-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: -moz-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <span
              :style="{ fontSize: (50 / 96) + 'rem', lineHeight: (50 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }"
              style="font-family: SimSun; font-weight: 400; color: #FFFFFF;">{{ awayTeamName }}</span>
          </div>
        </div>
      </div>
      <!-- 队伍结束 -->
      <!-- 主体开始 -->
      <div :style="{ width: '100%', height: mainHeight + 'px' }"
        style="display: flex; flex-direction: row; justify-content: center; align-items: flex-start;" ref="mainElement">
        <div style="width: 32.3%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <div :style="{ width: '100%', height: mainHeight + 'px' }"
            style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden;"
            class="invisible-scrollbar">
            <div ref="homeTeamScoreElement" :style="{ width: '100%' }"
              style="display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;"
              @click="toMatchInfosClick">
              <span
                :style="{ fontSize: (160 / 96) + 'rem', borderTop: 'solid #5DAC81 ' + (8 / 96) + 'rem', borderBottom: 'solid #5DAC81 ' + (8 / 96) + 'rem' }"
                style="font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF;">{{ homeTeamScorce }}</span>
            </div>
            <div :style="{ height: (54 / 96) + 'rem', marginTop: (19 / 96) + 'rem', marginBottom: (19 / 96) + 'rem' }"
              style="width: 88.4%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
              ref="titleElement">
              <div :style="{ width: (77 / 96) + 'rem' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">号码</span>
              </div>
              <div :style="{ width: '57.9%' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">姓名</span>
              </div>
              <!-- <div :style="{ width: (77 / 96) + 'rem' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">犯规</span>
              </div> -->
              <div :style="{ width: (77 / 96) + 'rem' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">得分</span>
              </div>
            </div>
            <div v-if="homeTeamElementHeight > mainHeight - homeTeamScoreHeight - titleElementHeight"
              style="width: 88.4%;">
              <vue-seamless-scroll :data="homeTeamLists" class="seamless-warp" :class-option="classLeftOption"
                :style="{ height: mainHeightItem + 'px' }">
                <div ref="homeTeamElement" style="width: 100%;">
                  <!-- <div v-for="(item, index) in homeTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow: auto;" :style="{ height: (54 / 96) + 'rem', borderTopLeftRadius: (54 / 96) + 'rem', borderBottomLeftRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : '' }"> -->
                  <div v-for="(item, index) in homeTeamLists" :key="index"
                    style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow: auto;"
                    :style="{ height: (54 / 96) + 'rem', borderTopLeftRadius: (54 / 96) + 'rem', borderBottomLeftRadius: (54 / 96) + 'rem' }">
                    <!-- <div
                        style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
                        :style="{ height: (50 / 96) + 'rem', borderTopLeftRadius: (50 / 96) + 'rem', borderBottomLeftRadius: (50 / 96) + 'rem', background: index <= 4 ? '#121327' : '' }"> -->
                    <div
                      style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
                      :style="{ height: (50 / 96) + 'rem', borderTopLeftRadius: (50 / 96) + 'rem', borderBottomLeftRadius: (50 / 96) + 'rem' }">
                      <div :style="{ width: (77 / 96) + 'rem' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span
                          :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem', color: 'rgba(238, 238, 238, 0.8)' /* color: index <= 4 ? '#5DAC81' : 'rgba(238, 238, 238, 0.8)' */ }"
                          style="font-family: SimHei; font-weight: 400;">{{ item.playerNum }}</span>
                      </div>
                      <div :style="{ width: '57.9%' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                          style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{
                          item.playerName }}</span>
                      </div>
                      <!-- <div :style="{ width: (77 / 96) + 'rem' }"
                          style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                          <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                            style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum
                            }}</span>
                        </div> -->
                      <div :style="{ width: (77 / 96) + 'rem' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                          style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum
                          }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </vue-seamless-scroll>
            </div>
            <div v-if="homeTeamElementHeight <= mainHeight - homeTeamScoreHeight - titleElementHeight"
              style="width: 88.4%;">
              <div ref="homeTeamElement" style="width: 100%;">
                <!-- <div v-for="(item, index) in homeTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow: auto;" :style="{ height: (54 / 96) + 'rem', borderTopLeftRadius: (54 / 96) + 'rem', borderBottomLeftRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : '' }"> -->
                <div v-for="(item, index) in homeTeamLists" :key="index"
                  style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow: auto;"
                  :style="{ height: (54 / 96) + 'rem', borderTopLeftRadius: (54 / 96) + 'rem', borderBottomLeftRadius: (54 / 96) + 'rem' }">
                  <!-- <div
                      style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
                      :style="{ height: (50 / 96) + 'rem', borderTopLeftRadius: (50 / 96) + 'rem', borderBottomLeftRadius: (50 / 96) + 'rem', background: index <= 4 ? '#121327' : '' }"> -->
                  <div
                    style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
                    :style="{ height: (50 / 96) + 'rem', borderTopLeftRadius: (50 / 96) + 'rem', borderBottomLeftRadius: (50 / 96) + 'rem' }">
                    <div :style="{ width: (77 / 96) + 'rem' }"
                      style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span
                        :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem', color: 'rgba(238, 238, 238, 0.8)' /* color: index <= 4 ? '#5DAC81' : 'rgba(238, 238, 238, 0.8)' */ }"
                        style="font-family: SimHei; font-weight: 400;">{{ item.playerNum }}</span>
                    </div>
                    <div :style="{ width: '57.9%' }"
                      style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                        style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{
                        item.playerName
                        }}</span>
                    </div>
                    <!-- <div :style="{ width: (77 / 96) + 'rem' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                          style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum
                          }}</span>
                      </div> -->
                    <div :style="{ width: (77 / 96) + 'rem' }"
                      style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                        style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum
                        }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div :style="{ width: '28%', height: mainHeight + 'px' }"
          style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow: hidden;"
          class="invisible-scrollbar">
          <!-- 节数开始 -->
          <!-- <span :style="{ fontSize: (66 / 96) + 'rem', marginTop: '6%' }"
            style="font-family: Adobe Heiti Std; font-weight: normal; color: #FFFFFF;">{{ sectionsNum }}</span> -->
          <!-- 节数结束 -->
          <div :style="{ marginTop: '6%' }"
            style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <!-- 倒计时开始 -->
            <div v-if="sectionShow"
              style="margin-top: 14px; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div v-if="showMinuteMnisecond" :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div
                  :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <!-- <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ minute }}</span> -->
                  <input :style="{ width: '100%', height: '100%', fontSize: (80 / 96) + 'rem' }"
                    style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000; text-align: center;"
                    v-model="minute" @input="minuteInput" />
                </div>
              </div>
              <div @click="showMinuteMnisecondClick" v-if="showMinuteMnisecond" :style="{ width: (60 / 96) + 'rem' }"
                style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;">
                <span :style="{ fontSize: (40 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: bold; color: #FFFFFF;">:</span>
              </div>
              <div :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div
                  :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <!-- <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ second }}</span> -->
                  <input :style="{ width: '100%', height: '100%', fontSize: (80 / 96) + 'rem' }"
                    style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000; text-align: center;"
                    v-model="second" @input="secondInput" />
                </div>
              </div>
              <div @click="showMinuteMnisecondClick" v-if="!showMinuteMnisecond" :style="{ width: (60 / 96) + 'rem' }"
                style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;">
                <span :style="{ fontSize: (40 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: bold; color: #FFFFFF;">.</span>
              </div>
              <div v-if="!showMinuteMnisecond" :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div
                  :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }"
                  style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div
                  style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <!-- <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ millisecond }}</span> -->
                  <input :style="{ width: '100%', height: '100%', fontSize: (80 / 96) + 'rem' }"
                    style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000; text-align: center;"
                    v-model="millisecond" @input="millisecondInput" />
                </div>
              </div>
            </div>
            <!-- 倒计时结束 -->
            <!-- 24秒开始 -->
            <div v-if="time1Show"
              :style="{ width: (130 / 96) + 'rem', height: (76 / 96) + 'rem', marginTop: (29 / 96) + 'rem', borderRadius: (10 / 96) + 'rem' }"
              style="background: url(../../../static/kuang.png) no-repeat; background-size: 100% 100%; opacity: 0.95; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div
                :style="{ width: (126 / 96) + 'rem', height: (70 / 96) + 'rem', borderRadius: (10 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
                <input :style="{ width: '100%', height: '100%', fontSize: (60 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #E49805; text-align: center;"
                  v-model="time1" />
              </div>
            </div>
          </div>
          <!-- 24秒结束 -->
          <!-- 暂停开始 -->
          <div :style="{ marginTop: (46 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ homeTeamSuspendNum
                  }}</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (46 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #07BA18;">暂停</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ awayTeamSuspendNum
                  }}</span>
              </div>
            </div>
          </div>
          <!-- 暂停结束 -->
          <!-- 犯规开始 -->
          <div :style="{ marginTop: (38 / 96) + 'rem' }"
            style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ homeTeamfoulNum
                  }}</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (46 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #E50909;">犯规</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div
                style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }"
                  style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ awayTeamfoulNum
                  }}</span>
              </div>
            </div>
          </div>
          <!-- 犯规结束 -->
        </div>
        <!--<div :style="{ width: '32.3%', height: mainHeightItem + 'px' }" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; overflow: auto;" class="invisible-scrollbar">
          <div :style="{ height: (54 / 96) + 'rem', marginTop: (19 / 96) + 'rem', marginBottom: (19 / 96) + 'rem' }" style="width: 88.4%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">P</span>
            </div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">F</span>
            </div>
            <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;"></div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;"></div>
          </div>
          <div v-for="(item, index) in awayTeamLists" :key="index" style="width: 88.4%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(-88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : ''}">
            <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (50 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? '#121327' : ''}">
              <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum }}</span>
              </div>
              <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum }}</span>
              </div>
              <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerName }}</span>
              </div>
              <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerNum }}</span>
              </div>
            </div>
          </div>
        </div>-->
        <div style="width: 32.3%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <div :style="{ width: '100%', height: mainHeight + 'px' }"
            style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; overflow: hidden;"
            class="invisible-scrollbar">
            <div ref="awayTeamScoreElement" :style="{ width: '100%' }"
              style="display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;"
              @click="toMatchInfosClick">
              <span
                :style="{ fontSize: (160 / 96) + 'rem', borderTop: 'solid #5DAC81 ' + (8 / 96) + 'rem', borderBottom: 'solid #5DAC81 ' + (8 / 96) + 'rem' }"
                style="font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF;">{{ awayTeamScorce }}</span>
            </div>
            <div :style="{ height: (54 / 96) + 'rem', marginTop: (19 / 96) + 'rem', marginBottom: (19 / 96) + 'rem' }"
              style="width: 88.4%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
              <div :style="{ width: (77 / 96) + 'rem' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">号码</span>
              </div>
              <div :style="{ width: '57.9%' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">姓名</span>
              </div>
              <!-- <div :style="{ width: (77 / 96) + 'rem' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">犯规</span>
              </div> -->
              <div :style="{ width: (77 / 96) + 'rem' }"
                style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                  style="font-family: SimHei; font-weight: 400; color: #ababab;">得分</span>
              </div>
            </div>
            <div v-if="awayTeamElementHeight > mainHeight - awayTeamScoreHeight - titleElementHeight"
              style="width: 88.4%;">
              <vue-seamless-scroll :data="awayTeamLists" class="seamless-warp" :class-option="classRightOption"
                :style="{ height: mainHeightItem + 'px' }">
                <div ref="awayTeamElement" style="width: 100%;">
                  <!-- <div v-for="(item, index) in awayTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(-88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : ''}"> -->
                  <div v-for="(item, index) in awayTeamLists" :key="index"
                    style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;"
                    :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem' }">
                    <div
                      style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
                      :style="{ height: (50 / 96) + 'rem', borderTopRightRadius: (50 / 96) + 'rem', borderBottomRightRadius: (50 / 96) + 'rem', /* background: index <= 4 ? '#121327' : '' */ }">
                      <div :style="{ width: (77 / 96) + 'rem' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span
                          :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem', color: 'rgba(238, 238, 238, 0.8)' /* color: index <= 4 ? '#5DAC81' : 'rgba(238, 238, 238, 0.8)' */ }"
                          style="font-family: SimHei; font-weight: 400;">{{ item.playerNum }}</span>
                      </div>
                      <div :style="{ width: '57.9%' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                          style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{
                          item.playerName }}</span>
                      </div>
                      <!-- <div :style="{ width: (77 / 96) + 'rem' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                          style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum
                          }}</span>
                      </div> -->
                      <div :style="{ width: (77 / 96) + 'rem' }"
                        style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                        <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                          style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum
                          }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </vue-seamless-scroll>
            </div>
            <div v-if="awayTeamElementHeight <= mainHeight - awayTeamScoreHeight - titleElementHeight"
              style="width: 88.4%;">
              <div ref="awayTeamElement" style="width: 100%;">
                <!-- <div v-for="(item, index) in awayTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(-88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : ''}"> -->
                <div v-for="(item, index) in awayTeamLists" :key="index"
                  style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;"
                  :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem' }">
                  <div
                    style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
                    :style="{ height: (50 / 96) + 'rem', borderTopRightRadius: (50 / 96) + 'rem', borderBottomRightRadius: (50 / 96) + 'rem', /* background: index <= 4 ? '#121327' : '' */ }">
                    <div :style="{ width: (77 / 96) + 'rem' }"
                      style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span
                        :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem', color: 'rgba(238, 238, 238, 0.8)' /* color: index <= 4 ? '#5DAC81' : 'rgba(238, 238, 238, 0.8)' */ }"
                        style="font-family: SimHei; font-weight: 400;">{{ item.playerNum }}</span>
                    </div>
                    <div :style="{ width: '57.9%' }"
                      style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                        style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{
                        item.playerName
                        }}</span>
                    </div>
                    <!-- <div :style="{ width: (77 / 96) + 'rem' }"
                      style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                        style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum
                        }}</span>
                    </div> -->
                    <div :style="{ width: (77 / 96) + 'rem' }"
                      style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }"
                        style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum
                        }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体结束 -->
      <!-- 页脚logo开始 -->
      <div
        style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed;"
        :style="{ bottom: (20 / 96) + 'rem' }" ref="footElement">
        <!-- <div :style="{ width: (300 / 96) + 'rem', height: (150 / 96) + 'rem' }">
            <img src="http://boyubasketball.oss-cn-shanghai.aliyuncs.com/image/e2001a71-5355-43f3-93e9-3fdf1b2d9fad.jpeg" style="width: 100%; height: 100%;" />
          </div> -->
        <!-- <div :style="{ width: (192 / 96) + 'rem', height: (87 / 96) + 'rem' }" -->
        <!-- <div :style="{ width: '2rem', height: '2rem' }" -->
        <!-- <div :style="{ width: '4.6rem'}"
          style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <img style="width: 100%; height: 100%;" src="../../../static/baoan3ren.png" />
        </div> -->
      </div>
      <!-- 页脚logo结束 -->
      <!-- 弹窗开始 -->
      <div v-if="showModal"
        :style="{ position: 'fixed', top: '0', width: '100%', height: clientHeight + 'px', backgroundColor: 'rgba(0, 0, 0, 0.3)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
        <div
          style="width: 60%; height: 60%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #FFFFFF; border-radius: 0.1rem; position: relative;">
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;">
            <div
              style="width: 10%; height: 0.7rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; cursor: pointer; padding-right: 0.3rem;"
              @click="hideSettingClick">
              <span style="font-size: 0.4rem; color: #333333;">X</span>
            </div>
          </div>
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0.2rem;">
            <div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div
                style="width: 80%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <div
                  style="width: 20%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <span style="font-size: 0.2rem; color: #000000;">比赛计时钟</span>
                </div>
                <div
                  style="width: 70%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <span style="font-size: 0.2rem; color: #000000;">每节时间</span>
                  <div
                    style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                    <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;"
                      v-model="sectionTimeInput" />
                  </div>
                  <span style="font-size: 0.2rem; color: #000000;">分</span>
                </div>
              </div>
              <div
                style="width: 20%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
                <el-switch v-model="value" active-color="#5DAC81" inactive-color="#CCCCCC" style="margin: 0rem 1rem;"
                  @change="valueChange">
                </el-switch>
              </div>
            </div>
          </div>
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0.2rem;">
            <div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div
                style="width: 80%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <div
                  style="width: 20%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <span style="font-size: 0.2rem; color: #000000;">进攻计时钟</span>
                </div>
                <div
                  style="width: 70%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                  <div
                    style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-right: 0.2rem;">
                    <span style="font-size: 0.2rem; color: #000000;">进攻时间</span>
                    <div
                      style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                      <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;" v-model="time" />
                    </div>
                    <span style="font-size: 0.2rem; color: #000000;">秒</span>
                  </div>
                  <div
                    style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-right: 0.2rem;">
                    <span style="font-size: 0.2rem; color: #000000;">进攻时间少于</span>
                    <div
                      style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                      <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;"
                        v-model="time2" />
                    </div>
                    <span style="font-size: 0.2rem; color: #000000;">秒</span>
                  </div>
                  <div
                    style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-right: 0.2rem;">
                    <span style="font-size: 0.2rem; color: #000000;">时回</span>
                    <div
                      style="width: 0.5rem; height: 0.3rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0rem 0.1rem;">
                      <input style="font-size: 0.2rem; width: 100%; height: 100%; text-align: center;"
                        v-model="time3" />
                    </div>
                    <span style="font-size: 0.2rem; color: #000000;">秒</span>
                  </div>
                </div>
              </div>
              <div
                style="width: 20%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
                <el-switch v-model="value2" active-color="#5DAC81" inactive-color="#CCCCCC" style="margin: 0rem 1rem;"
                  @change="value2Change">
                </el-switch>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 0.01rem; backgroundColor: #EEEEEE;"></div>
          <div
            style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000; font-weight: bold;">操作说明</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 空格键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">开始或停止比赛计时钟</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">空格</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 K键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">开始或停止进攻时钟</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">K</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 J键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">进攻计时钟回24秒</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">J</span>
              </div>
            </div>
            <div
              style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <div
                style="width: 2rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">按 L键</span>
              </div>
              <div
                style="width: 3rem; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span style="font-size: 0.2rem; color: #000000;">进攻计时钟回14秒</span>
              </div>
              <div
                style="width: 0.6rem; height: 0.4rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border: 0.01rem solid #CCCCCC; border-radius: 0.1rem;">
                <span style="font-size: 0.2rem; color: #000000;">L</span>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 0.01rem; backgroundColor: #EEEEEE;"></div>
          <div
            style="width: 92%; height: 0.6rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: absolute; bottom: 0.3rem;">
            <div
              style="height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
              <span style="font-size: 0.3rem; color: #FF0000; font-weight: bold;">*特别注意：如果使用计时功能，比赛过程中不要刷新页面</span>
            </div>
            <div
              style="height: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
              <div
                style="width: 1rem; height: 0.4rem; border: 0.01rem solid #EEEEEE; border-radius: 0.1rem; display: flex; flex-direction: row; justify-content: center; align-items: center; backgroundColor: #5DAC81; cursor: pointer;"
                @click="saveSettingClick">
                <span style="font-size: 0.2rem; color: #FFFFFF; font-weight: bold;">保存</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗结束 -->
    </div>
  </div>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll';
  import { pageResize } from '../../utils/resetScreenSize.js';
  import config from '../../utils/config';
  import { ElSwitch } from 'element-ui';
  export default {
    name: 'MatchSchedule',
    components: {
      vueSeamlessScroll
    },
    data () {
      return {
        countDown: true,
        matchTitle: "",
        homeTeamName: "",
        awayTeamName: "",
        homeTeamImg: "",
        awayTeamImg: "",
        sectionsNum: "",
        minute: "06",
        second: "22",
        millisecond: "55",
        homeTeamScorce: 0,
        awayTeamScorce: 0,
        homeTeamSuspendNum: 0,
        awayTeamSuspendNum: 0,
        homeTeamfoulNum: 0,
        awayTeamfoulNum: 0,
        i: 0,
        homeTeamLists: [],
        awayTeamLists: [],
        mainHeight: 0,
        mainHeightItem: 0,
        backsShows: false,
        homeTeamElementHeight: 0,
        awayTeamElementHeight: 0,
        timer: null,
        settingShows: false,
        showModal: false,
        clientHeight: 0,
        value: false,
        value2: false,
        sectionShow: false,
        time1Show: false,
        sectionTimeInput: 12,
        sectionTime: 0,
        time: 24,
        time1: 0,
        time2: 14,
        time3: 14,
        timer1: null,
        startShows: false,
        timers: null,
        startTimeShows: false,
        showMinuteMnisecond: false,
        showModalTime: false,
        homeTeamScoreHeight: 0,
        awayTeamScoreHeight: 0,
        titleElementHeight: 0,
      defaultHeadImg: require("../../../static/logoHead.png"),
      }
    },
    computed: {
      classRightOption () {
        return {
          step: 0, // 数值越大速度滚动越快
          limitMoveNum: this.awayTeamLists.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      },
      classLeftOption () {
        return {
          step: 0, // 数值越大速度滚动越快
          limitMoveNum: this.homeTeamLists.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    mounted () {
      pageResize();
      // setInterval(this.myFunction, 1000 * 5);
    },
    methods: {
      myFunction () {
        this.i = this.i + 1;
        // console.log("轮训任务=================>" + this.i);
        //这里写自己的ajax请求访问后台就可以了
      },
      selectMatchVo (id) {
        let leagueId = this.$route.query.leagueId
        let scheduleId = this.$route.query.matchId
        let {defaultHeadImg} = this;
        // let jsons = {
        //   id: id
        // };
        let jsons = {
          leagueId: leagueId,
          scheduleId: scheduleId,
          isJson: true
        };
        // this.$http.post('/competition/selectCompetitionData', jsons).then((res) => {
          fetch(
        `http://scorebar.yundongshugenmatch.cn/api/system/league/h5/getScore?tournamentId=${scheduleId}`,
        {method: "GET"}
      )
        .then((response) => response.json())
        .then((res) => {
          if (res.code == 200) {
            let homeTeamLists = [];
            let awayTeamLists = [];
            this.homeTeamName = res.data.teamOneName;
            this.awayTeamName = res.data.teamTwoName;
            this.matchTitle = res.data.contestName;
            this.homeTeamImg = res.data.teamOneLogo
              ? `https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${res.data.teamOneLogo}`
              : defaultHeadImg;
            this.awayTeamImg = res.data.teamTwoLogo
              ? `https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${res.data.teamTwoLogo}`
              : defaultHeadImg;
            // // "https://boyubasketball.oss-cn-shanghai.aliyuncs.com/" +
            // //   res.data.teamOneLogo || ;
            // this.awayTeamImg =
            //   "https://boyubasketball.oss-cn-shanghai.aliyuncs.com/" +
            //     res.data.teamTwoLogo || "../../../static/logoHead.png";
            // this.homeTeamImg = 'https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png'// "../../static/league_match_logo.png";
            // this.awayTeamImg = 'https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png' // "../../static/league_match_logo.png";
            this.homeTeamScorce = res.data.teamOneScore;
            this.awayTeamScorce = res.data.teamTwoScore;
            let quarter = res.data.subsection;
            if (quarter == 1) {
              this.sectionsNum = "第一节";
              // this.sectionsNum = "1st";
            }
            if (quarter == 2) {
              this.sectionsNum = "第二节";
              // this.sectionsNum = "2nd";
            }
            if (quarter == 3) {
              this.sectionsNum = "第三节";
              // this.sectionsNum = "3rd";
            }
            if (quarter == 4) {
              this.sectionsNum = "第四节";
              // this.sectionsNum = "4th";
            }
            if (quarter >= 5) {
              // this.sectionsNum = "加时赛";
              // this.sectionsNum = `ot${quarter - 4}`;
              this.sectionsNum = `第${quarter - 4}加时`;
            }
            this.homeTeamSuspendNum = res.data.homeTeamPause;
            this.awayTeamSuspendNum = res.data.awayTeamPause;
            this.homeTeamfoulNum = res.data.homeTeamFoul;
            this.awayTeamfoulNum = res.data.awayTeamFoul;
            for (let i = 0; i < res.data.playerListOne.length; i++) {
              // if(res.data.homePlayerStatistics[i].playerInfo) {
              homeTeamLists.push({
                pNum: res.data.playerListOne[i].playerScore,
                fNum: res.data.playerListOne[i].playerFoul,
                isUp: res.data.playerListOne[i].isUp,
                // fNum: common.foulFormat(res.data.playerListOne[i].playerFoul),
                // fNum: res.data.playerListOne[i].playerFoul, // common.foulFormat(res.data.playerListOne[i].playerFoul), // res.data.playerListOne[i].playerFoul,
                playerNum: res.data.playerListOne[i].playerNumber,
                playerName: res.data.playerListOne[i].playerName,
                // isFirst: res.data.playerListOne[i].isFirst || false
              });
              // }
            }
            homeTeamLists.sort((a, b) => {
              return b.pNum - a.pNum;
            });
            this.homeTeamLists = homeTeamLists;
            console.log(res.data.playerListTwo.length);
            for (let i = 0; i < res.data.playerListTwo.length; i++) {
              awayTeamLists.push({
                pNum: res.data.playerListTwo[i].playerScore,
                fNum: res.data.playerListTwo[i].playerFoul,
                isUp: res.data.playerListTwo[i].isUp,
                playerNum: res.data.playerListTwo[i].playerNumber,
                playerName: res.data.playerListTwo[i].playerName,
              });
            }
            awayTeamLists.sort((a, b) => {
              return b.pNum - a.pNum;
            });
            this.awayTeamLists = awayTeamLists;
            this.$nextTick(() => {
              this.mainHeight = document.documentElement.clientHeight - this.$refs.matchTitleElement.offsetHeight - this.$refs.teamElement.offsetHeight;
              // this.mainHeightItem = document.documentElement.clientHeight - this.$refs.matchTitleElement.offsetHeight - this.$refs.teamElement.offsetHeight - this.$refs.titleElement.offsetHeight;
              this.homeTeamElementHeight =
                this.$refs.homeTeamElement.offsetHeight;
              this.awayTeamElementHeight =
                this.$refs.awayTeamElement.offsetHeight;
              this.mainHeightItem = Math.ceil(
                (this.homeTeamElementHeight / this.homeTeamLists.length) * 12
              );
            });
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((e) => {
        });


        // 'https://lvapi.woaolanqiu.cn/schedul/live/live/schedule' 原先

        // this.$http.post(`http://scorebar.yundongshugenmatch.cn/api/system/league/h5/getScore?tournamentId=${scheduleId}`, jsons).then((res) => {
        //   if (res.code == 200) {
        //     let homeTeamLists = [];
        //     let awayTeamLists = [];
        //     this.homeTeamName = res.data.scheduleInfo.homeTeamName;
        //     this.awayTeamName = res.data.scheduleInfo.awayTeamName;
        //     this.matchTitle = res.data.leagueInfo.leagueName;
        //     this.homeTeamImg = res.data.scheduleInfo.homeTeamLogoUrl ? "https://www.woaoo.net/" + res.data.scheduleInfo.homeTeamLogoUrl : 'https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png'// "../../static/league_match_logo.png";
        //     this.awayTeamImg = res.data.scheduleInfo.awayTeamLogoUrl ? "https://www.woaoo.net/" + res.data.scheduleInfo.awayTeamLogoUrl : 'https://ydsg-1256672631.cos.ap-guangzhou.myqcloud.com/icon/defaultTeamLogo.png' // "../../static/league_match_logo.png";
        //     this.homeTeamScorce = res.data.homeTeamScore;
        //     this.awayTeamScorce = res.data.awayTeamScore;
        //     let quarter = res.data.lastLiveRecord.part;
        //     if (quarter == 1) {
        //       // this.sectionsNum = "第一节";
        //       this.sectionsNum = "1st";
        //     }
        //     if (quarter == 2) {
        //       // this.sectionsNum = "第二节";
        //       this.sectionsNum = "2nd";
        //     }
        //     if (quarter == 3) {
        //       // this.sectionsNum = "第三节";
        //       this.sectionsNum = "3rd";
        //     }
        //     if (quarter == 4) {
        //       // this.sectionsNum = "第四节";
        //       this.sectionsNum = "4th";
        //     }
        //     if (quarter >= 5) {
        //       // this.sectionsNum = "加时赛";
        //       this.sectionsNum = `${quarter - 4}ot`;
        //     }
        //     this.homeTeamSuspendNum = res.data.homeTeamPause;
        //     this.awayTeamSuspendNum = res.data.awayTeamPause;
        //     this.homeTeamfoulNum = res.data.homeTeamFoul;
        //     this.awayTeamfoulNum = res.data.awayTeamFoul;
        //     for (let i = 0; i < res.data.homePlayerStatistics.length; i++) {
        //       // if(res.data.homePlayerStatistics[i].playerInfo) {
        //       homeTeamLists.push({
        //         pNum: res.data.homePlayerStatistics[i].score,
        //         fNum: res.data.homePlayerStatistics[i].foul,
        //         playerNum: res.data.homePlayerStatistics[i].luckyNumber,
        //         playerName: res.data.homePlayerStatistics[i].playerName
        //         // face: res.data.homePlayerStatistics[i].playerInfo ? res.data.homePlayerStatistics[i].playerInfo.face : "",
        //         // playerNum: res.data.homePlayerStatistics[i].playerInfo ? res.data.homePlayerStatistics[i].playerInfo.number : "",
        //         // playerName: res.data.homePlayerStatistics[i].playerInfo ? res.data.homePlayerStatistics[i].playerInfo.name : "其他",
        //         // fNum: res.data.homePlayerStatistics[i].fouls,
        //         // pNum: res.data.homePlayerStatistics[i].pts,
        //         // asts: res.data.homePlayerStatistics[i].asts,
        //         // blks: res.data.homePlayerStatistics[i].blks,
        //         // competitionId: res.data.homePlayerStatistics[i].competitionId,
        //         // def: res.data.homePlayerStatistics[i].def,
        //         // disqualifyingFoul: res.data.homePlayerStatistics[i].disqualifyingFoul,
        //         // eff: res.data.homePlayerStatistics[i].eff,
        //         // fouls: res.data.homePlayerStatistics[i].fouls,
        //         // fts: res.data.homePlayerStatistics[i].fts,
        //         // ftsMiss:res.data.homePlayerStatistics[i]. ftsMiss,
        //         // id: res.data.homePlayerStatistics[i].id,
        //         // isAppearance: res.data.homePlayerStatistics[i].isAppearance,
        //         // isFirst: res.data.homePlayerStatistics[i].isFirst,
        //         // isHome: res.data.homePlayerStatistics[i].isHome,
        //         // isPlay: res.data.homePlayerStatistics[i].isPlay,
        //         // isPresent: res.data.homePlayerStatistics[i].isPresent,
        //         // off: res.data.homePlayerStatistics[i].off,
        //         // offensiveFoul: res.data.homePlayerStatistics[i].offensiveFoul,
        //         // onePs: res.data.homePlayerStatistics[i].onePs,
        //         // onePsMiss: res.data.homePlayerStatistics[i].onePsMiss,
        //         // ordinaryFoul: res.data.homePlayerStatistics[i].ordinaryFoul,
        //         // playTime: res.data.homePlayerStatistics[i].playTime,
        //         // playerId: res.data.homePlayerStatistics[i].playerInfo ? res.data.homePlayerStatistics[i].playerInfo.playerId : "",
        //         // number: res.data.homePlayerStatistics[i].playerInfo ? res.data.homePlayerStatistics[i].playerInfo.number : "",
        //         // name: res.data.homePlayerStatistics[i].playerInfo ? res.data.homePlayerStatistics[i].playerInfo.name : "其他",
        //         // pts: res.data.homePlayerStatistics[i].pts,
        //         // rebs: res.data.homePlayerStatistics[i].rebs,
        //         // stls: res.data.homePlayerStatistics[i].stls,
        //         // technicalFoul: res.data.homePlayerStatistics[i].technicalFoul,
        //         // threePs: res.data.homePlayerStatistics[i].threePs,
        //         // threePsMiss: res.data.homePlayerStatistics[i].threePsMiss,
        //         // tos: res.data.homePlayerStatistics[i].tos,
        //         // twoPs: res.data.homePlayerStatistics[i].twoPs,
        //         // twoPsMiss: res.data.homePlayerStatistics[i].twoPsMiss,
        //         // unsportsmanlikeFoul: res.data.homePlayerStatistics[i].unsportsmanlikeFoul
        //       });
        //       // }
        //     }
        //     homeTeamLists.sort((a, b) => {
        //       return b.pNum - a.pNum
        //     });
        //     this.homeTeamLists = homeTeamLists;
        //     for (let i = 0; i < res.data.awayPlayerStatistics.length; i++) {
        //       // if(res.data.awayPlayerStatistics[i].playerInfo) {
        //       awayTeamLists.push({
        //         pNum: res.data.awayPlayerStatistics[i].score,
        //         fNum: res.data.awayPlayerStatistics[i].foul,
        //         playerNum: res.data.awayPlayerStatistics[i].luckyNumber,
        //         playerName: res.data.awayPlayerStatistics[i].playerName
        //         // face: res.data.awayPlayerStatistics[i].playerInfo ? res.data.awayPlayerStatistics[i].playerInfo.face : "",
        //         // playerNum: res.data.awayPlayerStatistics[i].playerInfo ? res.data.awayPlayerStatistics[i].playerInfo.number : "",
        //         // playerName: res.data.awayPlayerStatistics[i].playerInfo ? res.data.awayPlayerStatistics[i].playerInfo.name : "其他",
        //         // fNum: res.data.awayPlayerStatistics[i].fouls,
        //         // pNum: res.data.awayPlayerStatistics[i].pts,
        //         // asts: res.data.awayPlayerStatistics[i].asts,
        //         // blks: res.data.awayPlayerStatistics[i].blks,
        //         // competitionId: res.data.awayPlayerStatistics[i].competitionId,
        //         // def: res.data.awayPlayerStatistics[i].def,
        //         // disqualifyingFoul: res.data.awayPlayerStatistics[i].disqualifyingFoul,
        //         // eff: res.data.awayPlayerStatistics[i].eff,
        //         // fouls: res.data.awayPlayerStatistics[i].fouls,
        //         // fts: res.data.awayPlayerStatistics[i].fts,
        //         // ftsMiss:res.data.awayPlayerStatistics[i]. ftsMiss,
        //         // id: res.data.awayPlayerStatistics[i].id,
        //         // isAppearance: res.data.awayPlayerStatistics[i].isAppearance,
        //         // isFirst: res.data.awayPlayerStatistics[i].isFirst,
        //         // isHome: res.data.awayPlayerStatistics[i].isHome,
        //         // isPlay: res.data.awayPlayerStatistics[i].isPlay,
        //         // isPresent: res.data.awayPlayerStatistics[i].isPresent,
        //         // off: res.data.awayPlayerStatistics[i].off,
        //         // offensiveFoul: res.data.awayPlayerStatistics[i].offensiveFoul,
        //         // onePs: res.data.awayPlayerStatistics[i].onePs,
        //         // onePsMiss: res.data.awayPlayerStatistics[i].onePsMiss,
        //         // ordinaryFoul: res.data.awayPlayerStatistics[i].ordinaryFoul,
        //         // playTime: res.data.awayPlayerStatistics[i].playTime,
        //         // playerId: res.data.awayPlayerStatistics[i].playerInfo ? res.data.awayPlayerStatistics[i].playerInfo.playerId : "",
        //         // number: res.data.awayPlayerStatistics[i].playerInfo ? res.data.awayPlayerStatistics[i].playerInfo.number : "",
        //         // name: res.data.awayPlayerStatistics[i].playerInfo ? res.data.awayPlayerStatistics[i].playerInfo.name : "其他",
        //         // pts: res.data.awayPlayerStatistics[i].pts,
        //         // rebs: res.data.awayPlayerStatistics[i].rebs,
        //         // stls: res.data.awayPlayerStatistics[i].stls,
        //         // technicalFoul: res.data.awayPlayerStatistics[i].technicalFoul,
        //         // threePs: res.data.awayPlayerStatistics[i].threePs,
        //         // threePsMiss: res.data.awayPlayerStatistics[i].threePsMiss,
        //         // tos: res.data.awayPlayerStatistics[i].tos,
        //         // twoPs: res.data.awayPlayerStatistics[i].twoPs,
        //         // twoPsMiss: res.data.awayPlayerStatistics[i].twoPsMiss,
        //         // unsportsmanlikeFoul: res.data.awayPlayerStatistics[i].unsportsmanlikeFoul
        //       });
        //       // }
        //     }
        //     awayTeamLists.sort((a, b) => {
        //       return b.pNum - a.pNum
        //     });
        //     this.awayTeamLists = awayTeamLists;
        //     this.$nextTick(() => {
        //       this.mainHeight = document.documentElement.clientHeight - this.$refs.matchTitleElement.offsetHeight - this.$refs.teamElement.offsetHeight;
        //       // this.mainHeightItem = document.documentElement.clientHeight - this.$refs.matchTitleElement.offsetHeight - this.$refs.teamElement.offsetHeight - this.$refs.titleElement.offsetHeight - this.$refs.homeTeamScoreElement.offsetHeight;
        //       this.homeTeamElementHeight = this.$refs.homeTeamElement.offsetHeight;
        //       this.awayTeamElementHeight = this.$refs.awayTeamElement.offsetHeight;
        //       this.homeTeamScoreHeight = this.$refs.homeTeamScoreElement.offsetHeight;
        //       this.awayTeamScoreHeight = this.$refs.awayTeamScoreElement.offsetHeight;
        //       this.titleElementHeight = this.$refs.teamElement.offsetHeight;
        //       // console.log("mainHeight: ", this.mainHeight);
        //       // console.log("homeTeamElementHeight: ", this.homeTeamElementHeight);
        //       // console.log("awayTeamElementHeight: ", this.awayTeamElementHeight);
        //       this.mainHeightItem = Math.ceil(this.homeTeamElementHeight / this.homeTeamLists.length * 12);
        //       // console.log("mainHeightItem: ", this.mainHeightItem);
        //     });
        //   } else {
        //     this.$toast(res.msg);
        //   }
        // }).catch(e => {

        // });
      },
      getMatchList () {
        console.log("getMatchList");
      },
      leaveClick () {
        this.backsShows = false;
      },
      enterClick () {
        this.backsShows = true;
      },
      goBackClick () {
        this.$router.back();
      },
      toMatchInfosClick () {
        // this.$router.push({
        // name: "MatchInfos", query: {}
        // });
      },
      leaveSettingClick () {
        this.settingShows = false;
      },
      enterSettingClick () {
        this.settingShows = true;
      },
      settingClick () {
        this.showModal = true;
      },
      hideSettingClick () {
        this.showModal = false;
      },
      valueChange (e) {
        console.log("e: ", e);
      },
      value2Change (e) {
        console.log("e2: ", e);
      },
      saveSettingClick () {
        clearInterval(this.timer1);
        clearInterval(this.timers);
        this.sectionTime = this.sectionTimeInput;
        this.second = 0;
        this.millisecond = 0;
        this.resetTime(this.sectionTimeInput, this.second, this.millisecond);
        this.time1 = this.time;
        this.sectionShow = this.value;
        this.time1Show = this.value2;
        this.showModal = false;
        this.startShows = false;
        this.startTimeShows = false;
        if (this.value || this.value2) {
          this.showModalTime = true;
        } else {
          this.showModalTime = false;
        }
      },
      startTime1 (time) {
        if (this.time1Show) {
          let msg;
          let maxtime = time * 1000;
          this.timer1 = setInterval(() => {
            if (maxtime >= 0) {
              let seconds = Math.floor(maxtime / 1000) < 10 ? "0" + Math.floor(maxtime / 1000) : Math.floor(maxtime / 1000);
              let ms = Math.floor(maxtime % 1000 / 100);
              if (seconds <= 5) {
                this.time1 = seconds + "." + ms;
              } else {
                this.time1 = seconds;
              }
              msg = seconds + "." + ms;
              maxtime -= 100;
            } else {
              this.time1 = 0;
              clearInterval(this.timer1);
              clearInterval(this.timers);
              this.startShows = false;
              this.startTimeShows = false;
              this.$refs.audioShortRef.play();
              setTimeout(() => {
                this.$refs.audioShortRef.currentTime = 0;
                this.$refs.audioShortRef.pause();
              }, 2000);
            }
          }, 100);
        }
      },
      resetTime (time, secondTime, msTime) {
        let maxtime = time * 60 * 1000 + secondTime * 1000;
        if (maxtime > 0) {
          let minutes = time < 10 ? "0" + time : time; // Math.floor(maxtime / 60 /1000) < 10 ? "0" + Math.floor(maxtime / 60 /1000) : Math.floor(maxtime / 60 /1000);
          let seconds = secondTime < 10 ? "0" + secondTime : secondTime; // Math.floor(maxtime / 1000 % 60) < 10 ? "0" + Math.floor(maxtime / 1000 % 60) : Math.floor(maxtime / 1000 % 60);
          let ms = msTime;
          this.minute = minutes;
          this.second = seconds;
          this.millisecond = ms;
          this.showMinuteMnisecond = minutes > 0 ? true : false;
          this.sectionTime = maxtime / 60 / 1000;
        } else {

        }
      },
      countTime (time, secondTime, msTime) {
        console.log("secondTime: ", secondTime);
        let maxtime = time * 60 * 1000 + secondTime * 1000;
        this.timers = setInterval(() => {
          if (maxtime >= 0) {
            let minutes = Math.floor(maxtime / 60 / 1000) < 10 ? "0" + Math.floor(maxtime / 60 / 1000) : Math.floor(maxtime / 60 / 1000);
            let seconds = Math.floor(maxtime / 1000 % 60) < 10 ? "0" + Math.floor(maxtime / 1000 % 60) : Math.floor(maxtime / 1000 % 60);
            let ms = Math.floor(maxtime % 1000 / 100);
            this.minute = minutes;
            this.second = seconds;
            this.millisecond = ms;
            this.showMinuteMnisecond = minutes > 0 ? true : false;
            maxtime -= 100;
            this.sectionTime = maxtime / 60 / 1000;
          } else {
            clearInterval(this.timers);
            clearInterval(this.timer1);
            this.startShows = false;
            this.startTimeShows = false;
            this.$refs.audioLongRef.play();
            setTimeout(() => {
              this.$refs.audioLongRef.currentTime = 0;
              this.$refs.audioLongRef.pause();
            }, 8000);
          }
        }, 100);
      },
      showMinuteMnisecondClick () {
        clearInterval(this.timers);
        this.showMinuteMnisecond = !this.showMinuteMnisecond;
        if (this.showMinuteMnisecond) {
          let minute = this.minute;
          let second = this.second;
          let millisecond = this.millisecond;
          this.minute = second;
          this.second = millisecond;
          this.millisecond = millisecond;
        } else {
          let minute = this.minute;
          let second = this.second;
          let millisecond = this.millisecond;
          this.minute = 0;
          this.second = minute;
          this.millisecond = second;
        }
        if (this.startShows) {
          this.countTime(this.minute, this.second, this.millisecond);
        }
      },
      minuteInput (e) {
        console.log("e: ", e);
        clearInterval(this.timers);
        this.sectionTime = e.target.value;
        if (this.startShows) {
          this.countTime(e.target.value, this.second, this.millisecond);
        } else {
          // this.resetTime(e.target.value, this.second, this.millisecond);
        }
      },
      secondInput (e) {
        console.log("e: ", e);
        clearInterval(this.timers);
        this.second = e.target.value;
        if (this.startShows) {
          this.countTime(this.minute, e.target.value, this.millisecond);
        } else {
          // this.resetTime(this.minute, e.target.value, this.millisecond);
        }
      },
      millisecondInput (e) {
        console.log("e: ", e);
        clearInterval(this.timers);
        this.millisecond = e.target.value;
        if (this.startShows) {
          this.countTime(this.minute, this.second, e.target.value);
        } else {
          // this.resetTime(this.minute, this.second, e.target.value);
        }
      }
    },
    activated () {
      this.clientHeight = document.documentElement.clientHeight;
      this.homeTeamLists = [];
      this.awayTeamLists = [];
      window.document.title = '大屏比分';
      let matchId = this.$route.query.matchId;
      this.selectMatchVo(matchId);
      this.backsShows = false;
      this.timer = setInterval(() => {
        this.selectMatchVo(matchId);
      }, 2000);
      document.addEventListener('keydown', (e) => {
        if (e.keyCode == 32) {
          // 空格
          if (!this.showModalTime) {
            return;
          }
          clearInterval(this.timers);
          clearInterval(this.timer1);
          this.startShows = !this.startShows;
          if (this.time1 > 0) {
            if (this.startShows) {
              this.startTimeShows = true;
            } else {
              this.startTimeShows = false;
            }
          }
          console.log(this.startShows);
          if (this.startShows) {
            this.countTime(this.minute, this.second, this.millisecond);
            if (this.time1 > 0) {
              this.startTime1(this.time1);
            }
          } else {
            clearInterval(this.timers);
            clearInterval(this.timer1);
          }
        }
        if (e.keyCode == 74) {
          // J
          if (!this.showModalTime) {
            return;
          }
          if (this.minute <= 0 && this.second <= this.time) {
            return;
          }
          clearInterval(this.timer1);
          this.time1 = this.time;
          if (!this.startTimeShows) {
            return;
          }
          if (this.startShows) {
            this.startTimeShows = true;
          } else {
            this.startTimeShows = false;
          }
          if (this.time1 > 0 && this.startTimeShows) {
            this.startTime1(this.time1);
          }
        }
        if (e.keyCode == 75) {
          // K
          if (!this.showModalTime) {
            return;
          }
          clearInterval(this.timer1);
          this.startTimeShows = !this.startTimeShows;
          if (this.startTimeShows) {
            this.startTime1(this.time1);
          } else {
            clearInterval(this.timer1);
          }
        }
        if (e.keyCode == 76) {
          // L
          if (!this.showModalTime) {
            return;
          }
          if (this.minute <= 0 && this.second <= this.time3) {
            return;
          }
          clearInterval(this.timer1);
          this.time1 = this.time3;
          if (!this.startTimeShows) {
            return;
          }
          if (this.startShows) {
            this.startTimeShows = true;
          } else {
            this.startTimeShows = false;
          }
          if (this.time1 > 0 && this.startTimeShows) {
            this.startTime1(this.time1);
          }
        }
      });
    },
    deactivated () {
      clearInterval(this.timer);
      clearInterval(this.timer1);
      clearInterval(this.timers);
      this.mainHeight = 0;
      this.mainHeightItem = 0;
      this.homeTeamElementHeight = 0;
      this.awayTeamElementHeight = 0;
      this.$destroy("MatchSchedule");
    }
  }
</script>

<style scoped>
  .home-index {}

  .match-title-main {
    width: 86%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .match-title {
    font-family: SimHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
  }

  .invisible-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .seamless-warp {
    width: 100%;
    overflow: hidden;
  }
</style>